<template>
  <div class="interval-box">
    <div class="interval-list">
      <el-input
        class="interval-input"
        v-model="checkMinValue"
        clearable
        @blur="inputBlurHandle('min')"
        :placeholder="ftObj.minLabel ? ftObj.minLabel : '请输入'"
        :maxlength="ftObj.minMaxlength"
        :type="ftObj.inputType || 'number'"
        :max="ftObj.minMax"
        :min="ftObj.minMin"
        @clear="emitHandle"
      ></el-input>
      <div class="line">-</div>
      <el-input
        class="interval-input"
        v-model="checkMaxValue"
        clearable
        @blur="inputBlurHandle('max')"
        :placeholder="ftObj.maxLabel ? ftObj.maxLabel : '请输入'"
        :maxlength="ftObj.maxMaxlength"
        :type="ftObj.inputType || 'number'"
        :max="ftObj.maxMax"
        :min="ftObj.maxMin"
        @clear="emitHandle"
      ></el-input>
    </div>
  </div>
</template>
<script>
export default {
  name: "IntervalBox",
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    ftObj: {
      type: Object,
      default: () => {},
    },
    minValue: {
      default: "",
      require: true,
    },
    maxValue: {
      default: "",
      require: true,
    },
  },
  data: () => ({
    checkMinValue: "",
    checkMaxValue: "",
  }),
  methods: {
    emitHandle() {
      if (this.checkMinValue === "" && this.checkMaxValue === "") {
        this.$emit("input", []);
      } else {
        this.$emit("input", [this.checkMinValue, this.checkMaxValue]);
      }
      this.$emit("change-interval", this.ftObj);
    },
    inputBlurHandle(type) {
      let numberFlag =
        !this.ftObj.inputType || this.ftObj.inputType == "number";
      if (!numberFlag) return this.emitHandle();
      let valueFlag = this.checkMinValue !== "" && this.checkMaxValue !== "";
      if (!valueFlag) return this.emitHandle();
      let minFlag = Number(this.checkMinValue) > Number(this.checkMaxValue);
      if (minFlag) {
        if (type == "min") this.checkMinValue = "";
        else this.checkMaxValue = "";
      }
      this.emitHandle();
    },
    init() {
      if (!this.value.length) return;
      this.checkMinValue = this.value[0];
      this.checkMaxValue = this.value[1] !== undefined ? this.value[1] : "";
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.interval-box {
  height: 100%;
  width: 100%;
}
.interval-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.interval-input {
  flex: 1;
}
.line {
  margin: 0 8px;
}
</style>
